// 1.引入公用样式表
require("../../assets/css/index.less");
require("../../assets/fonts/iconfont.css");
require("../../assets/fonts/iconfont.css");

// 2.引入当前样式表
require("./personal.less");
let dom = require("../../utils/dom.js");
let https = require("../../utils/https.js");
let local = require("../../utils/local.js");
const axios = require('axios');
// import "weui";
require("../../assets/lib/weui/weui.css");
const weui = require("../../assets/lib/weui/weui.min.js");

// 判断是否有登录
// dom.isToken();
dom.ready(function () {
	//定义全局变量
	let imgUrl;
	let sex;
	let birthday;
	let proId;
	let ciId;
	// 跳转页面
	dom.goTo("#backBtn", "user");

	//回填数据功能---把本地用户数据,先填写到个人资料修改页
	function rander() {
		//1.获取本地用户信息
		let { imgUrl, nickName, gender, birthday, provinceId, cityId, sign } = local.get('user');

		//2.渲染后面数据到页面----注意,如果没有数据如何处理 
		dom.$('#avatarPic').src = https.BASE_URL + imgUrl;
		//头像默认值
		imgUrl = imgUrl;
		dom.$('#nickName').value = nickName;

		dom.$('#showSex').innerHTML = gender == 0 ? '男' : '女';
		sex = gender;

		dom.$('#showBirthday').innerHTML = birthday;
		birthday = birthday
		//省份和城市功能实现
		getAddress(provinceId, cityId).then(res => {
			dom.$('#showProvince').innerHTML = res[0].name;
			proId = {
				"value": res[0].id,
				"label": res[0].name
			};
			dom.$('#showCity').innerHTML = res[1].name;
			ciId = {
				"value": res[1].id,
				"label": res[1].name
			};
		})
		dom.$('#intro').value = sign;
	}

	async function getAddress(proId, cId) {
		let pId = await axios.get(https.BASE_URL + '/api/shared/province');
		let pArr = pId.data.data.filter(v => {
			return v.id == proId;
		})

		let ccId = await axios.get(https.BASE_URL + '/api/shared/city?provinceId=' + pArr[0].id);
		let cArr = ccId.data.data.filter(v => {
			return v.id == cId;
		})
		return [...pArr, ...cArr]
	}

	//当网页加载时调用
	rander()

	// 给图片绑定点击事件
	// dom.addEvent("#avatarPic", function () {
	// 	// 让input触发点击事件
	// 	dom.$("#picFile").click();
	// });

	/* 上传头像 */
	// 给input绑定change事件
	dom.$("#picFile").addEventListener("change", function () {
		// 调用单文件上传功能
		https.upLoadFile(
			"/api/circles/uploadImg",
			"file",
			this.files[0],
			function (res) {
				// console.log(this);
				// 上传成功
				if (res.errno == 0) {
					// 渲染图片
					dom.$("#avatarPic").src = https.BASE_URL + res.data.url;
					imgUrl = res.data.url;
				}
			}
		);
	});

	//选择性别
	dom.addEvent("#showSex", function () {
		// console.log("nnn", this);
		weui.picker(
			[
				{
					label: "男",
					value: 0, // 传入后台的值
				},
				{
					label: "女",
					value: 1, // 传入后台的值
				},
			],
			{
				// 在确定时触发
				onConfirm: (result) => {
					// 渲染lable的值
					// dom.$("#showSex").innerHTML = result[0].label;
					// console.log(this);
					this.innerHTML = result[0].label;
					sex = result[0].value;
				},
				title: "请选择性别",
			}
		);
	});

	//生日选择
	dom.addEvent("#showBirthday", function () {
		weui.datePicker({
			start: 1950, // 起始年份
			end: new Date().getFullYear(), // 结束日期
			onConfirm: (result) => {
				dom.$("#showBirthday").innerHTML = result
					.map((v) => {
						// 补0
						return v.value < 10 ? "0" + v.value : v.value;
					})
					.join("-");
			},
			title: "请选择生日",
		});
	});

	//选择省份
	dom.addEvent("#showProvince", function () {
		// 获取所有省份
		https.get("/api/shared/province", function (res) {
			// console.log(res);
			if (res.errno == 0) {
				//处理数据
				let proData = res.data.map((v) => {
					// console.log(v);
					// 数据格式必需是: [{ label: 文本, value: 值 }]
					return {
						label: v.name, // 省份名
						value: v.id, // 省份对应的id值
					};
				});
				// picker(数据, 对象)
				weui.picker(proData, {
					onConfirm: (result) => {
						// 渲染省份名
						dom.$("#showProvince").innerHTML = result[0].label;
						// 存储当前的省份
						provinceInfo = result[0];
					},
					title: "请选择省份",
				});
			}
		});
	});

	//选择城市
	dom.addEvent("#showCity", function () {
		console.log(222);
		// 判断id是否有值
		if (provinceInfo) {
			//获取所有省份
			https.get(
				"/api/shared/city?provinceId=" + provinceInfo.value,
				function (res) {
					// console.log(res);
					// 成功时
					if (res.errno == 0) {
						let proData = res.data.map((v) => {
							// console.log(v);
							return {
								label: v.name,
								value: v.id,
							};
						});
						weui.picker(proData, {
							onConfirm: (result) => {
								// 渲染城市
								dom.$("#showCity").innerHTML = result[0].label;
								city = result[0];
							},
							title: "请选择城市",
						});
					}
				}
			);
		}
		// 没有值时
		else {
			alert("请先选择省份");
		}
	});

	// 个人简介
	dom.$("textarea").addEventListener("input", function (v) {
		// console.log(222);
		// console.log(v.data);
		let len = this.value.length;
		// console.log(len);
		if (len > 200) {
			this.value = this.value.slice(0, 200);
		} else {
			dom.$("#number").innerHTML = len;
		}
	});

	// 保存信息
	dom.addEvent("#saveMsg", function () {
		let saveData = {
			imgUrl: imgUrl,
			nickName: dom.$("#nickName").value || "0001",
			gender: sex || 0,
			birthday: dom.$("#showBirthday").innerHTML,
			provinceId: proId.value,
			cityId: ciId.value,
			sign: dom.$("#intro").value || '什么都没有留下~~~',
		};
		https.post("/api/user/changeInfo", saveData, function (res) {
			if (res.errno == 0) {
				// 存到本地
				local.set("tk", res.data.token);
				// 跳转页面
				location.href = "user.html";
			} else {
				weui.alert(res.message)
			}
		});
	});

});
